<template>
  <div class="container">
    <div class="closeBtn">
      <span @click="$router.back()" class="iconfont iconicon-test"></span>
    </div>

    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>

    <div class="inputName">
      <!-- 使用组件 -->
      <authInput
        type="text"
        placeholder="请输入手机号"
        rule="^\d{4,16}$"
        err_message="请输入正确的手机号"
        @input="setUserName"
      />
    </div>

    <div class="nickName">
      <authInput
        type="text"
        placeholder="请输入昵称"
        rule="^\w{4,16}$"
        err_message="请输入正确昵称"
        @input="setNickName"
      />
    </div>

    <div class="inputPwd">
      <authInput
        type="password"
        placeholder="请输入密码"
        rule="^\d{3,16}$"
        err_message="请输入正确的密码"
        @input="setUserPwd"
      />
    </div>
    <div class="btn">
      <authBtn text="注册" @send="sendRegister" />
    </div>
  </div>
</template>

<script>
import authInput from "./components/authInput";
import authBtn from "./components/authBtn";
export default {
  components: {
    authInput: authInput,
    authBtn: authBtn
  },
  data() {
    return {
      username: "",
      password: "",
      nickname: ""
    };
  },
  methods: {
    setUserName(name) {
      this.username = name;
    },
    setNickName(name) {
      this.nickname = name;
    },
    setUserPwd(pwd) {
      this.password = pwd;
    },
    sendRegister() {
      // 发送 ajax 请求
      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      }).then(res => {
        if (!res.data.statusCode) {
          this.$toast.success(res.data.message);
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.container {
  padding: 0 5.556vw;
}
.closeBtn {
  padding-top: 20px;
  .iconfont {
    font-size: 7.5vw;
  }
}

.logo {
  display: flex;
  justify-content: center;
  .iconfont {
    font-size: 35vw;
    color: #d81e06;
  }
}
</style>